<template>
	<view class="xiangqing">
		<view style="height: 100%;overflow-x: hidden; overflow-y: scroll;">
			<template class="topimgs">
				<u-swiper :list="list1" @change="change" height="360"></u-swiper>
			</template>
			<view class="main_x">
				<view class="zixui">
					<view>
						<view class="jin">
							<text
								style="font-size: 14px; color: #000000;text-decoration:line-through;">￥{{datalist.price_market}}</text>￥{{datalist.price_selling}}
						</view>

					</view>
					<view>
						{{datalist.name}}
					</view>

					<view style="display: flex;justify-content: space-between;">
						<text style="font-size: 12px; color: #767676;">月销量 {{datalist.stock_virtual}}</text>
						<!-- <text class="iconfont text_gow" @click="shopping()">&#xe600;</text> -->
					</view>
				</view>
				<view class="youhui" @click="onshous()">
					<view class="youhui_top">
						<view style="display: flex;justify-content: center; ">
							<i class='iconfont' style='font-size: 15px; color: red;margin-right: 5px;'>&#xe8b3;</i>规格：
						</view>
						<view style="display: flex;justify-content: space-between;  width: 80%;">
							<view style="display: flex;justify-content: center;">
								<view class="qun">
									<view class="nin">
										查看规格
									</view>
								</view>

							</view>
							<view class="you">
								<i class='iconfont' style='font-size: 13px;'>&#xe612;</i>
							</view>
						</view>
					</view>

				</view>
				<view class="guge">
					<view class="refs">
						<mp-html :content="html" />
					</view>
				</view>
			</view>


			<u-popup :show="show" mode="bottom" @close="close" @open="open">
				<view style=" background-color: #f0f0f0;">
					<view style=" background-color: #f0f0f0;">
						<view style="width: 100px; height: 100px; position: absolute; top: -40px; padding-left: 20px;">
							<image style="width: 120px; height: 110px; border-radius: 10px;" :src="list1[0]"
								mode=""></image>
						</view>
						<view style="display: flex;justify-content: space-around;">
							<view class="">

							</view>
							<view style="width: 200px; padding: 10px;margin-left: 18%;">
								<text style="color: red; font-size: 12px;">￥<text
										style="font-size: 18px;">{{guigedatalist.price_selling}}</text></text>
								<view style="width: 300px;">
									<text style="font-size: 13px;">库存：{{guigedatalist.number_stock}}</text>
								</view>
							</view>
						</view>

					</view>
					<view class="popus">

						<view style="float: left; width: 100%;">
							<view v-for="ite in guige" style="margin: 5px;">
								<text style="font-size: 13px; color: #303133;   padding: 5px;">{{ite.name}}</text>
								<view style="margin-left: 20px; margin-top: 10px; color: #000000;">



									<u-radio-group @change="groupChange">
										<u-radio :name="item" @change="radioChange" v-for="(item, index) in ite.list"
											activeColor="#55aaff" :label="item.name">
										</u-radio>
									</u-radio-group>


								</view>
							</view>
						</view>
					</view>



					<view style="display: flex;justify-content: center; flex-direction: column;">
						<view style="display: flex;justify-content: center; padding: 10px 0 10px 0;">
							<view @click="settlement()" v-if="buttonshoux"
								style="display: flex;justify-content: center;flex-direction: column; text-align: center; color: #000; width: 40%; height: 40px;background-color: #fecd04;border-radius: 8px 0 0 8px;">
								立即购买
							</view>
							<view v-if="buttonshou"
								style="display: flex;justify-content: center;flex-direction: column; text-align: center; color: #000; width: 40%; height: 40px;background-color: #aaaa7f;border-radius: 8px 0 0 8px;">
								立即购买
							</view>
							<view @click="shopping()" v-if="buttonshoux"
								style="color: #fce1bf; margin-left: 5px; display: flex;justify-content: center;flex-direction: column; text-align: center;  width: 40%; height: 40px;background-color: #fe6601;border-radius: 0px 8px 8px 0px;">
								加入购物车
							</view>
							<view v-if="buttonshou"
								style="color: #000; margin-left: 5px; display: flex;justify-content: center;flex-direction: column; text-align: center;  width: 40%; height: 40px;background-color: #aaaa7f;border-radius: 0px 8px 8px 0px;">
								加入购物车
							</view>
						</view>
					</view>

				</view>
			</u-popup>

		</view>
		<view class="dibudaohang">
			<view
				style="display: flex;justify-content: center; flex-direction: column; padding: 12px; box-shadow: 1px 1px 1px 1px;">
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;justify-content: center; flex-direction: column;">
						<view style="display: flex;justify-content: space-around; width: 150px;">
							<view style=" display: flex;justify-content: center; flex-direction: column;">
								<view @click="toindex()" style="text-align: center;">
									<image src="../../static/shouyeB.png" style="width: 22px; height: 22px;" mode="">
									</image>
								</view>
								<text @click="toindex()" style="font-size: 12px; ">首页</text>
							</view>
							<view @click="shoucnag()"
								style="display: flex;justify-content: center; flex-direction: column;">
								<view style="text-align: center;">
									<image :src="shoucangimg" style="width: 24px; height: 23px;" mode="">
									</image>
								</view>
								<text style="font-size: 12px;">{{shoucangname}}</text>
							</view>
							<view @click="togwc()"
								style=" display: flex;justify-content: center; flex-direction: column;">
								<view style="text-align: center;">
									<view style="position: fixed;">
										<text
											style="position: absolute; top: -2px; left: 18px; background-color: red; color: #FFFFFF; display: inline-block;font-size: 10px;  width: 12px;height: 12px; border-radius: 50%;">{{gwcnum}}</text>

									</view>
									<image src="../../static/shoupingcak.png" style="width: 25px; height: 23px;"
										mode="">
									</image>
								</view>
								<text style="font-size: 12px;">购物车</text>
							</view>
						</view>
					</view>
					<view style="display: flex;justify-content: center;">
						<button type="default"
							style="border-radius: 20px 0 0 20px; padding: 3px; min-width: 90px; font-size: 14px; border: none;background-color: #000000;color: #FFFFFF;"
							@click="shoppingto()">加入购物车</button>
						<button type="default"
							style="border-radius: 0 20px 20px 0; padding: 3px; min-width: 90px; font-size: 14px; border: none;background-color: red;color: #FFFFFF;"
							@click="settlementto()">立即购买</button>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttonshoux:true,
				buttonshou:false,
				html: '',
				namesi: {
					name: '',
					imgs: ''
				},
				shoucangimg: '../../static/shoucang.png',
				shouquan: false,
				shoucang: {
					goodsid: 0
				},
				call: {
					page: 1
				},
				show: false,
				datalist: {
					price: '',
				},
				gwcnum: 0,
				shoacarlist: {
					goods_code:'',
					goods_spec: '0'
				},
				list1: [],
				guige: [],
				guigedatalist: {
					price_selling: 0,
					number_stock: 0
				},
				guigetypeid: {
					goods_id: ''
				},

				goods: [

				],
				zuijiid: {
					goods_id: ''
				},
				checkList: {
					goodsid: 0,
					logo: "",
					number_sales: 0,
					price: "",
					price_market: "",
					title: "",
					num: 1,
					number_goods: '',
				},
				checkLists: [

				], //订单数据
				aid:{
					code:''
				},
				getguiges: {
					goods_code: 0,
					goods_spec: ''
				},
				specA: [],
				shoucangname: '收藏',
				totalPrice: 0, //订单价格
				// spanC: {
				// 	spec: '0',
				// 	name: ''
				// }
				
			}
		},


		onLoad(option) {
			console.log(option.id);
			this.getAllCateGoodsid(option.id)
		},


		onShow() {
			// console.log(option);
			// var this_ = this
			// this_.onlog()
			// this.logc()

		},
		methods: {
			getAllCateGoodsid(id){
				this.aid.code = id
				this.$http.getAllCateGoods(this.aid).then(res=>{
					console.log(res.data.list[0]);
					this.html = res.data.list[0].content
					this.datalist = res.data.list[0]
					this.list1 = res.data.list[0].slider
					this.guige = res.data.list[0].specs
					// this.shoacarlist.uid = id
					this.shoacarlist.goods_code = res.data.list[0].code
					console.log(this.list1);
				})
			},

			groupChange(n) {
				var spanC = {}
				spanC.spec = n.group
				spanC.name = n.name
				var nameON = ''
				for (var i = 0; i < this.guige.length; i++) {
					nameON = this.guige[0].name
				}
				if (n.group == nameON) {
					this.specA.unshift(spanC)
				} else {
					this.specA.push(spanC)
				}


				for (var i = 0; i < this.specA.length; i++) {
					if (this.specA[i].spec == n.group && this.specA.length > 1 && this.specA[i].name != n.name) {
						this.specA.splice(i, 1)
					}
				}
				// console.log(n.group);
				// console.log(n.name);
				// console.log(this.specA);
				this.getguige()
			},
			radioChange(n) {

			},

			toindex() {
				uni.reLaunch({
					url: '../index/index'
				})
			},

			togwc() {
				uni.reLaunch({
					url: '../shopping/shopping'
				})
			},




			getguige() {
				console.log("ssssdd");
				var namege = ''
				if (this.specA.length == 1) {
					for (var i = 0; i < 1; i++) {
						namege = this.specA[i].spec + "::" + this.specA[i].name
					}
				} else {
					for (var i = 0; i < 1; i++) {
						namege = this.specA[i].spec + "::" + this.specA[i].name + ";;" + this.specA[i + 1].spec + "::" +
							this.specA[i + 1].name
					}
				}
				this.getguiges.goods_spec = namege
				this.getguiges.goods_code = this.datalist.code
				
				
				this.$http.getgetItem(this.getguiges).then(res => {
					console.log(res);
					console.log("//////****///");
					// this.shoacarlist.goods_spec = res.data[0].goods_spec
					// this.checkList.goods_spec = res.data[0].goods_spec
					this.guigedatalist.number_stock = res.data.stock_total
					this.guigedatalist.price_selling = res.data.price_selling
					if(this.guigedatalist.number_stock <= 0){
						this.buttonshou = true
						this.buttonshoux = false
					}else{
						this.buttonshou = false
						this.buttonshoux = true
					}
				})
				this.shoacarlist.goods_spec = this.getguiges.goods_spec
				// console.log(this.getguiges.goods_spec);
			},


			// //查询规格
			// onguige(id) {
			// 	this.guigetypeid.goods_id = id
			// 	this.$http.get_guige(this.guigetypeid).then(res => {
			// 		this.listB = res.data
			// 		for (var i = 0; i < this.listB.length; i++) {
			// 			this.listB[i].specs = JSON.parse(this.listB[i].specs)
			// 		}
			// 		this.guige = this.listB[0].specs
			// 	})
			// },
			
			// 收藏
			shoucnag() {

				this.$http.postaddshouc(this.shoucang).then(res => {
					if (res.code == 40002) {
						this.shouquan = true
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
					this.getzhuangtaishouc(this.shoucang.goodsid)


				})
			},
			//已收藏
			getzhuangtaishouc(id) {
				this.shoucang.goodsid = id
				this.$http.getzhuangtaishouc(this.shoucang).then(res => {
					if (res.data == 1) {
						this.shoucangname = '已收藏'
						this.shoucangimg = '../../static/shouB.png'
					}
				})
			},


			change() {
			},
			onshous() {
				this.show = true
			},
			open() {
				// this.guige = []
				// this.getguige()
			},
			close() {
				this.show = false
			},

			onlog() {
				let thens_ = this
				this.$http.getclasslistindex(this.call).then(res => {

					thens_.goods = res.data

				})
			},

			settlementto() {
					if (this.guige == null) {
						this.checkLists = []
						this.$http.getaddzj().then(res => {
							if (res.code == 40002) {
								this.checkLists = []
								this.shouquan = true
							} else {
								this.checkLists = []
								this.checkLists.push(this.checkList)

								uni.setStorage({
									key: 'shopddan',
									data: this.checkLists
								})

								uni.setStorage({
									key: 'qiansum',
									data: this.totalPrice
								})

								if (this.checkLists.length > 0) {
									uni.navigateTo({
										url: '../dindan/dindan'
									})
								} else {
									uni.$u.toast('请先选择物品sss');
								}
							}
						})

					} else {
						this.show = true
					}
			






			},





			shoppingto() {
				if (this.guige == null) {
					
				} else {
					this.show = true
				}
			},




			settlement() {
				// this.shoacarlist.goods_spec = ''
				if (this.guige.number_stock != 0) {
					this.show = false
					if (this.getguiges.spec == '') {
						uni.$u.toast('请选择规格');
					} else {
						this.checkLists = []
						this.$http.getaddzj().then(res => {
							if (res.code == 40002) {
								this.checkLists = []
								this.shouquan = true
							} else {
								this.checkLists = []
								this.totalPrice = this.guigedatalist.price_selling
								this.checkList.price = this.guigedatalist.price_selling
								this.checkLists.push(this.checkList)

								uni.setStorage({
									key: 'shopddan',
									data: this.checkLists
								})

								uni.setStorage({
									key: 'qiansum',
									data: this.totalPrice
								})

								if (this.checkLists.length > 0) {
									uni.navigateTo({
										url: '../dindan/dindan'
									})
								}
							}
						})
					}
				}else{
					uni.$u.toast("库存不足");
				}


			},
			shopping() {
				// this.shoacarlist.goods_spec = ''
				this.show = false
				if (this.getguiges.spec == '') {
					uni.$u.toast('请选择规格');
				} else {
					var num = 0
					// this.shoacarlist.num = num + 1
					// this.shoacarlist.id = this.aid.code
					// this.shoacarlist.goods_spec = this.getguiges.spec
					this.totalPrice = this.guigedatalist.price_selling
					this.checkList.price = this.guigedatalist.price_selling
					this.$http.postaddCart(this.shoacarlist).then(res => {
						if (res.code == 40002) {
							this.shouquan = true
						} else {
							// this.logc()

							if (res.code == 1) {
								uni.$u.toast('添加成功');
								uni.reLaunch({
									url: '../shopping/shopping'
								})
							} else if(res.code == 4002){
								uni.$u.toast(res.info);
								uni.reLaunch({
									url:'../loginfor/loginfor'
								})
							}else{
								uni.$u.toast(res.info);
							}
						}

					})
				}



			},
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3183672 */
		src: url('//at.alicdn.com/t/font_3183672_9mmrk5370kd.woff2?t=1650439297551') format('woff2'),
			url('//at.alicdn.com/t/font_3183672_9mmrk5370kd.woff?t=1650439297551') format('woff'),
			url('//at.alicdn.com/t/font_3183672_9mmrk5370kd.ttf?t=1650439297551') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 25px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	.dibudaohang {
		width: 100%;
		position: absolute;
		bottom: 0px;
		background-color: #FFFFFF;
	}

	.xiangqing {
		width: 100%;
		height: 100%;
		position: fixed;
		overflow-x: hidden;
	}

	.you {
		display: flex;
		justify-content: center;
		color: red;
	}

	.topimgs {
		position: relative;
	}

	.zixui {
		background-color: #FFFFFF;
		padding: 10px;
	}

	.zixui>view:nth-child(1) {
		display: flex;
		justify-content: space-between;
	}

	.jin {
		font-size: 25px;
		color: red;
	}

	.zixui>view:nth-child(2) {
		margin-top: 10px;
	}

	.zixui>view:nth-child(3) {
		margin: 10px 0 10px 0;
	}

	.zixui>view:nth-child(4) {
		font-size: 12px;
		color: #767676;
	}

	.main_x {
		background-color: #F7F7F7;
	}


	.u-radio.data-v-da6758f0 {
		margin-right: 15px;
		padding: 10px;
		background-color: #FFFFFF;
		border: 1px solid #F5FFF0;
		border-radius: 20px;
		min-width: 80px;
		text-align: center;
	}

	.u-radio__text {
		width: 100%;
		height: 100%;
	}

	.youhui {
		padding: 0 10px 0 10px;
		margin: 10px 0 10px 0;
		background-color: #FFFFFF;
	}

	.youhui>view {
		line-height: 50px;
		font-size: 13px;
	}


	.guge {
		margin: 5px;
		background-color: #FFFFFF;
	}

	.youhui_top {
		display: flex;
		justify-content: space-between;
	}

	.youhui_boot {
		display: flex;
		justify-content: space-between;
	}

	.qun {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.nin {
		margin-right: 10px;
		border: 1px solid #F8F8F8;
		padding: 0 10px 0 10px;
		border-radius: 5px;
		line-height: 20px;
		color: #767676;
	}

	.popus {
		overflow-y: auto;
		height: 400px;
		background-color: #f0f0f0;
		margin-top: 50px;
		padding: 10px;
	}

	.popus>view {
		margin-bottom: 20px;
	}

	.refs {
		width: 100%;
		height: 100%;
		padding-bottom: 100px;
		background-color: #F7F7F7;
	}

	.Bluse {
		display: inline-block;
		width: 46%;
		background-color: #fff;
		margin: 5px;
		border-radius: 10px;
	}

	.bian {
		position: relative;
		height: 140px;
		border-radius: 5px;
		overflow: hidden;
		text-align: center;
		padding: 2px;
	}

	.texts {
		margin: 10px;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		height: 120px;
	}

	.text_gow {
		width: 10px;
		height: 20px;
		color: red;
		margin-right: 35px;
		font-size: 2rem;
		margin-bottom: 10px;
	}
</style>
